<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*#box{*/
            /*width: 50px;*/
            /*height: 50px;*/
            /*position: relative;*/
            /*!*background: pink;*!*/
            /*left:0;*/
            /*top:0;*/
            /*transition: all .1s ease-in-out;*/
        /*}*/


        #box{
            width: 100px;
            height: 100px;
            position: absolute;
        }

    </style>
</head>
<body>
     <div id="box"></div>
    <script>
        /*function hex2rgb(str) {
            return str.match(/[a-z0-9]{2}/ig).map(function (value) {
                return parseInt(value, 16);
            })
        }
        console.log(hex2rgb('#abcdef'));

        function rgb2hex(str) {
            return '#'+  str.match(/\d{1,3}/g).map(function (value) {
                return  (+value).toString(16);
            }).join('');
        }

        console.log(rgb2hex('rgb(10,20,123'));*/



        /*function bxeqx(m, n) {
            if(m === 1 || m === n){
                return  1;
            }else{
                return arguments.callee(m-1, n-1) + arguments.callee(m-1, n);
            }
        }
        console.log(bxeqx(5));

      function bezier (t, controlpoints) {
            var control = controlpoints || [0, 1, 0, 1];
            // var x = 3 * Math.pow(1 - t, 2) * t * control[0] + 3 * (1 - t) * Math.pow(t, 2) * control[2] + Math.pow(t, 3);
            var y = 3 * Math.pow(1 - t, 2) * t * control[1] + 3 * (1 - t) * Math.pow(t, 2) * control[3] + Math.pow(t, 3);
            return y;
        }
          function animation (dom, start, terminal, prop, duration, timeFunc) {
            var timer = null;
            var t = 0;
            timer = setInterval(function() {
                 if(t >= duration){
                     clearInterval(timer);
                     dom.style[prop] = terminal + 'px';
                 }
                 var pos = bezier(t/duration) * (terminal - start);
                 dom.style[prop] = start + pos + "px";
                 t += 17;
            },17)
        }
        var odiv = document.getElementById("box");
        animation(odiv, 0, 1000, 'left', 1000, 'ease-in');*/

        function bezier (t, timeFunc, flag) {
            var timeFuncList = {
                "ease": [.25,.1,.25,1],
                "linear":[0,0,1,1],
                "ease-in":[.42,0,1,1],
                "ease-out":[0,0,.58,1],
                "ease-in-out":[.42,0,.58,1]
            };
            var control = [0, 0, 1, 1];
            if(typeof  timeFunc === 'string' && timeFuncList[timeFunc]){
                control = timeFuncList[timeFunc];
            }
            if(typeof timeFunc === 'object' && timeFunc.length === 4){
                control = timeFunc;
            }
            var currentX = 3 * Math.pow(1 - t, 2) * t * control[0] + 3 * (1 - t) * Math.pow(t, 2) * control[2] + Math.pow(t, 3);
            var currentY = flag && 3 * Math.pow(1 - t, 2) * t * control[1] + 3 * (1 - t) * Math.pow(t, 2) * control[3] + Math.pow(t, 3);
            return [currentX, currentY];
        }

        function animation (dom, start, terminal, prop, duration, timeFunc) {
            var hasNoUnitProps = ['opacity', 'font-weight', 'z-index'];
            var isNoUnit = hasNoUnitProps.indexOf(prop) > -1;
            var timer = null;
            var t = 0;
            timer = setInterval(function () {
                var progress = bezier(t/duration, timeFunc);
                t += 17;
                dom.style[prop] = progress * (terminal - start) + (isNoUnit ? 0 : 'px');
                if(t >= duration) {
                    clearInterval(timer);
                    dom.style[prop] = terminal +  (isNoUnit ? 0 : 'px');
                }
            }, 17);
        }

        function animationColor (dom, startColor, terminalColor, prop, duration, timeFunc) {
            function color2arr(color) {
                if(/^#([a-f0-9]{3})|([a-f0-9]{6})$/.test(color)){
                    if(color.length === 4){
                        return color.match(/[a-f0-9]/ig).map(function (value) {
                            return value.repeat(2);
                        }).map(function (item) {
                            return parseInt(item, 16);
                        })
                    }else{
                        return color.match(/[a-f0-9]{2}/ig).map(function (value) {
                            return parseInt(value, 16);
                        })
                    }
                }
                if(/^rgb\([0-9]{1,3},[0-9]{1,3},[0-9]{1,3}\)/.test(color)){
                    return color.match(/[0-9]{1,3}/g).map(function (value) {
                        if(+value < 0){
                            return 0;
                        }else if(+value > 255){
                            return 255;
                        }else {
                            return +value;
                        }
                    })
                }
            }
            var start = color2arr(startColor);
            var terminal = color2arr(terminalColor);
            console.log(start);
            console.log(terminal);
            var timer = null;
            var t = 0;
            timer = setInterval(function () {
                var progress = bezier(t/duration, timeFunc);
                var r = start[0] + (terminal[0] - start[0]) * progress[0];
                var g = start[1] + (terminal[1] - start[1]) * progress[0];
                var b = start[2] + (terminal[2] - start[2]) * progress[0];
                dom.style[prop] = 'rgb('+ r + ',' + g + ',' + b +')';
                console.log(progress);
                t += 17;
                if(t >= duration){
                    clearInterval(timer);
                    dom.style[prop] = terminalColor;
                }
            }, 17)
        }

        var item = document.getElementById("box");

        animationColor(item,'#7bdb13', 'rgb(123,10,8)', 'background', 4000, 'ease-in-out');

    </script>
</body>
<!--<script>
    var ColorA = '#cd597f';
    var ColorB = '#344df5';
    function color2rgb(color){
        var r = parseInt(color.substr(1,2),16);
        var g = parseInt(color.substr(3,2),16);
        var b = parseInt(color.substr(5,2),16);
        return new Array(r,g,b);
    }
    function rgb2color(rgb) {
        var s = '#';
        for(var i = 0; i < 3; i++){
            var c = Math.round(rgb[i]).toString(16);
            if(c.length === 1){
                c = '0' + c;
                s += c;
            }
        }
        return s.toUpperCase();
    }
    function gradient() {
        // var str = my
        var result = '';
        var Step = str.length - 1;
        var Gradient = new Array(3);
        var A = color2rgb(ColorA);
        var B = color2rgb(ColorB);
        for(var N = 0; N <= step; N++){
            for(var c = 0; c < 3; c++){
                Gradient[c] = A[c] + (B[c] - A[c]) / Step * N;
            }
            result
        }
    }
</script>-->
</html>